<template>

  <div>
    <el-card>
      <el-form ref="form" :model="formData" size="medium" label-width="110px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="机构名称" prop="orgName">
              <el-select v-model="formData.orgId" clearable style="margin-left: 20px;" placeholder="请选择">
                <el-option
                  v-for="item in forname"
                  :key="item.id"
                  :label="item.orgName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="姓名" prop="repManName">
                <el-input v-model="formData.repManName" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="formData.gender" clearable style="margin-left: 20px;" placeholder="请选择">
                <el-option
                  v-for="item in gender"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="90px" label="学历" prop="edu">
              <el-select v-model="formData.edu" clearable style="margin-left: 20px; width: 120px" placeholder="请选择">
                <el-option
                  v-for="item in edu"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="科室" prop="divName">
              <el-select v-model="formData.divName" clearable style="margin-left: 20px;" placeholder="请选择">
                <el-option
                  v-for="item in sectionname"
                  :key="item.id"
                  :label="item.divName"
                  :value="item.divName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="职务" prop="manageJob">
              <el-select v-model="formData.manageJob" clearable style="margin-left: 20px;" placeholder="请选择">
                <el-option
                  v-for="item in mjob"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="职级" prop="jobLevel">
              <el-select v-model="formData.jobLevel" clearable style="margin-left: 20px;" placeholder="请选择">
                <el-option
                  v-for="item in joblevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="所学专业" prop="spe">
              <el-select v-model="formData.spe" clearable :style="{width: '120%'}" placeholder="请选择">
                <el-option
                  v-for="item in spe"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="margin-left: 100px;">
            <el-button type="success" @click="query(1)">检索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-row class="add_btn_row"><el-button type="primary" size="small" icon="el-icon-plus"
                                             @click="$router.push('/personnel/personadd')">创建人员</el-button></el-row>
      <el-table :data="personlist"
                border style="width: 100%">
        <el-table-column  type="selection"  width="35">
        </el-table-column>
        <el-table-column
          fixed
          prop="id"
          label="人员编码"
          width="60">
        </el-table-column>
        <el-table-column
          prop="orgName"
          label="机构名称"
          width="160">
        </el-table-column>
        <el-table-column
          prop="divName"
          label="科室"
          width="150">
        </el-table-column>
        <el-table-column
          prop="repManName"
          label="姓名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="50">
        </el-table-column>
        <el-table-column
          prop="edu"
          label="学历"
          width="100">
        </el-table-column>
        <el-table-column
          prop="manageJob"
          label="职务"
          width="100">
        </el-table-column>
        <el-table-column
          prop="jobLevel"
          label="职级"
          width="140">
        </el-table-column>
        <el-table-column
          prop="spe"
          label="所学专业"
          width="100">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="350">
          <template slot-scope="scope">
            <!--slot-scope="scope" <el-button @click="handleClick(scope.row)" type="text" size="small">查看  </el-button>| -->
            <el-button  type="primary" round size="mini" @click="handlekan(scope.row.id)" circle>查看</el-button>
            <el-button  type="success" round size="mini" @click="handleupdate(scope.row.id)" circle>更新</el-button>
            <el-button  type="success" round size="mini" @click="section(scope.row.id)" circle>关联科室</el-button>
            <el-button  type="success" round size="mini" @click="" circle>创建登录号</el-button>
            <el-button  type="success" round size="mini" @click="delete(scope.row.id)" circle>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="center" class="page-row" v-show="page_show">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </el-card>

  </div>
</template>

<script>
  import {post} from '@/utils/api'
  export default {
    data () {
      return {
        orgId:0,
        currentPage:1,
        total:0  ,//一共有多少条数据
        pagesize:6 , //每页显示多少条数据  页数等于  total/pagesize
        formData:{},
        sectionname: [],
        personlist:[],
        page_show:true, //分页插件是否显示，
        forname:[],
        gender:[{"label": "男", "value": "男"}, {"label": "女", "value": "女"}],
        edu:[{"label": "高中及以下", "value": "高中及以下"},{"label": "中专", "value": "中专"},{"label": "大学专科", "value": "大学专科"}, {"label": "大学本科", "value": "大学本科"},{"label": "研究生", "value": "研究生"}, {"label": "博士", "value": "博士"},],
        mjob:[{"label": "所(局)长", "value": 1}, {"label": "党委(副)书记", "value": 2},{"label": "副所(局)长", "value": 3}, {"label": "科室主任", "value": 4},{"label": "科室副主任", "value": 5}, {"label": "无职务", "value": 6}],
        joblevel:[{"label": "无", "value": 0},{"label": "省部级正职", "value": 1}, {"label": "省部级副职", "value": 2},{"label": "厅局级正职", "value": 3}, {"label": "厅局级副职", "value": 4},{"label": "县处级正职", "value": 5}, {"label": "县处级副职", "value": 6}, {"label": "乡科级正职", "value": 7},{"label": "乡科级副职", "value": 8}, {"label": "科办员", "value": 9}],
        spe:[{"label": "工程", "value": "工程"}, {"label": "法律", "value": "法律"},{"label": "医药", "value": "医药"},{"label": "公共卫生", "value": "公共卫生"}, {"label": "无专业", "value": "无专业"},{"label": "其他专业", "value": "其他专业"},{"label": "不详", "value": "不详"}]
      };
    },
    async created() {
      let res = await post("org/getallorg")
      // console.log(res);
      this.forname = res
      this.getdivname()
      this.getListByPage(1)
    },
    watch: {

    },
    methods: {
      async getdivname(){
        let res = await post("section/getallsection")
        this.sectionname = res
        // console.log(res)
      },
      //async
      async getListByPage(page){
        let res = await post("person/getbypage",{page: page, count: this.pagesize, ...this.form})
        // console.log(res)
        this.personlist = res.records
        this.page_show = true
        this.total = res.total
        // console.log(res.total)

      },
      handleCurrentChange(currentPage){
        //当前页码改变时触发
        // console.log(currentPage)
        this.currentPage = currentPage
        this.query(currentPage)
      },
      handlekan(id){
        this.$router.push({name:"personscan",query:{id:id}})
        // console.log(id);
      },
      handleupdate(id){
        this.$router.push({name:"personupdate",query:{id:id}})
        // console.log(id);
      },
      //关联科室
      section(id){
        this.$router.push({name:"sectionrelevance",query:{id:id}})
      },
      async query(page){
        console.log(this.formData)
        let res = await post("person/getbycontion",{page:page,count:this.pagesize,...this.formData})
        this.page_show = true
        console.log(res)
        this.personlist = res.records
        // console.log(this.orglist)
        this.total = res.total
        // console.log(res.total)
        this.formData = {}
      },
      back(){
        this.$router.go()
      },
      async delete(id) {
        await post("person/deletebyid",{id:id})
      }

    }
  }
</script>
<style>
  .add_btn_row{
    display: flex;
    justify-content: end;
    padding-bottom: 10px;
  }
  .box-card{
    margin: 10px;
  }
  .el-form{
    margin: 10px 10px 0px;
  }
  .el-pagination{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>
